<template>
  <ModuleContainer :moduleBase="module.attrs">
    <div
      class="swiperBox"
      v-if="module.list.length > 0"
      :style="{ '--swiper-dot-color': module.attrs.dotColor }"
    >
      <!-- 立体效果 -->
      <swiper ref="mySwiper" :options="swiperOption1" v-if="module.attrs.abbr">
        <swiper-slide style="width: 80%;" v-for="item in module.list" :key="item.id">
          <div class="img">
            <img :src="item.img.url" v-if="item.img.url" />
            <img v-else src="../../assets/imgs/defImg.jpg" alt />
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination" id="custom"></div>
      </swiper>

      <!-- 普通效果 -->
      <swiper
        style="width: 100%"
        ref="mySwiper"
        :options="swiperOption2"
        v-show="!module.attrs.abbr"
      >
        <swiper-slide style="width: 100%;" v-for="item in module.list" :key="item.id">
          <div class="img">
            <img :src="item.img.url" v-if="item.img.url" />
            <img v-else src="../../assets/imgs/defImg.jpg" alt />
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination" id="custom"></div>
      </swiper>
    </div>
  </ModuleContainer>
</template>
<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import "swiper/swiper.scss";
let that = null;
export default {
  name: 'slideshow',
  props: ["module"],
  components: { Swiper, SwiperSlide },
  directives: { swiper: directive },
  data() {
    return {
      swiperOption1: {
        slidesPerView: "auto",
        loop: true,
        centeredSlides: true,
        watchSlidesProgress: true,
        effect: "coverflow",
        pagination: {
          el: '.swiper-pagination',
          bulletClass: "my-bullet",
          bulletActiveClass: "my-bullet-active",
        },
        coverflowEffect: {
          rotate: 0,
          stretch: 100,
          depth: 200,
          modifier: 1,
          slideShadows: true,
        },
        on: {
          click: function (e) {
            that.$util.openAttr(that.module.list, this.clickedIndex - that.module.list.length);
          },
        }
      },
      swiperOption2: {
        loop: true,
        autoplay: 1000,
        observer: true,
        observeParents: true,
        pagination: {
          el: '.swiper-pagination',
          bulletClass: "my-bullet",
          bulletActiveClass: "my-bullet-active",
        },
        on: {
          click: function (e) {
            
            that.$util.openAttr(that.module.list, this.clickedIndex - 1);
          },
        },
      },
    };
  },

  created() {
    that = this;
  },

  mounted() { },
  methods: {},
};
</script>

<style lang="scss" scoped>
.swiperBox {
  $swiper-dot-color: var(--swiper-dot-color);
  height: 170px;
  overflow: hidden;
  /deep/ .swiper-container {
    height: 170px;
    .my-bullet {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      margin: 0 3px;
    }
    .my-bullet-active {
      background: $swiper-dot-color;
    }
  }
  .img {
    width: 100%;
    height: 100%;
    img {
      width: inherit;
      height: inherit;
      object-fit: cover;
    }
  }
}
</style>
